<template>
	<view>
		<template>
			<u-popup customStyle=" width:40vh" :show="show" mode="right" @close="show=false" @open="show=true">
				<view>
					<u-search :showAction="false" @search="search" v-model="keyword" actionText="搜索" :animation="true">
					</u-search>
					<u-cell-group>
						<u-cell :title="sline.Name" isLink icon="map" v-for="(sline,index1) in seachlist" :key="index1"
							@click="goline(sline.Latlng)">

						</u-cell>
					</u-cell-group>
				</view>
			</u-popup>

	
			<div style="width:100%;height:98vh;" id="myMapView" @click="containerclick" :datas="outdata"
				:change:datas="myMapView.inshowdatas" :mcenter="outcenter" :change:mcenter="myMapView.mgocenter"
				moveend="myMapView.midChange">
				<view>
					<div class="center">
						<button type='primary' v-if="isselect" style="z-index: 999;width: 60px;font-size: 15px;"
							@click="myMapView.inselect">选定
						</button>
					</div>
					<image class="center1" v-if="isselect" src='https://project.gxrunxiang.com/cdn/location.png'
						style="width:50px;height: 50px;"></image>

					<!-- <u-overlay :show="loading"><u-loading-icon :show="loading" color="red" @click='closeloading' style='margin-top: 50%;' ></u-loading-icon> </u-overlay> -->

				</view>
				<!-- 							<div style="position: absolute;right: 20px;top: 20px;z-index: 999;width: 220px; font-size: 5px;">
					{{myMapView.latlng}}
				</div> -->

			</div>
			<u-button type='primary' :plain="true"
				style="position:fixed ;right: 3vh;top: 20vh;z-index: 999;width: 100px;" v-if='islocated'
				@click="toggleSelect">添加线路点
			</u-button>
			<u-button type='primary' :plain="true" icon='search'
				style="position:fixed ;right: 3vh;top: 12vh;z-index: 999;width: 100px;" @click="show=!show">查找
			</u-button>
			<u-button type='primary' :plain="true" 
				style="position:fixed ;right: 3vh;top: 28vh;z-index: 999;width: 80px;" @click="showLegends = true">图例
			</u-button>
			<u-button type='primary' :plain="true"
				style="position:fixed ;right: 3vh;top: 36vh;z-index: 999;width: 80px;" @click="showLocate = !showLocate">定位
			</u-button>
			<u-button type='primary' :plain="true" v-if="isNow"
				style="position:fixed ;right: 3vh;top: 44vh;z-index: 999;width: 100px;" @click="toShow">显示近三月
			</u-button>
			<u-button type='primary' :plain="true" v-if="!isNow"
				style="position:fixed ;right: 3vh;top: 44vh;z-index: 999;width: 100px;" @click="toShow">显示全部
			</u-button>
			<view style="position:fixed ;right: 9vh;top: 4vh;z-index: 999;width: 70vw;background: #F2F2F2" v-show="showLocate">
				<u-search placeholder="请输入经纬度" :showAction="true" actionText="定位"  :action-style="{color: 'black'}" 
				@custom="toLocate" :clearabled="false"></u-search>
			</view>
			<view style="position:fixed ;right: 26vh;top: 88vh;z-index: 999;width: 80px;">
				<u--text :text="showLng" size="13"></u--text>
				<u--text :text="showLat" size="13"></u--text>
			</view>
			<!-- 		<u-button type='primary' :plain="true" icon='search'
				style="position:fixed ;right: 3vh;top: 12vh;z-index: 999;width: 100px;" @click="show=!show">地市：
			</u-button> -->
			<!-- <u--text type="primary" style="position:fixed ;right: 50%;top: 10vh;z-index: 999;width: 100px;" text="地市"> -->
			</u--text>
			<!-- <u-icon name="plus" labelPos='bottom'  customStyle="z-index: 999" style="position:fixed ;left: 30px;top: 100px;z-index: 999;width: 120px;" label="添加线路点" @click="toggleSelect" color="#2979ff" size="28"></u-icon> -->
			<image v-if="outisimage" style="position:fixed ;right: 3vh;top: 5vh;z-index: 999;width: 40px;height: 40px;"
				@click="myMapView.toggleimg" src='https://project.gxrunxiang.com/cdn/vec.jpg'></image>
			<image v-if="!outisimage" style="position:fixed ;right: 3vh;top: 5vh;z-index: 999;width: 40px;height: 40px"
				@click="myMapView.toggleimg" src='https://project.gxrunxiang.com/cdn/img.jpg'></image>
			<u-popup :show="showpop" :round="20" mode="bottom" :closeable="true" :overlay="true" @close="close">
				<u-scroll-list style="width: 95vw" >
					<u-list  v-for="(item,index) in items" :key="index" style="height: 500px">
						<u-cell-group style='margin-top: 50px; width: 95vw;'>
							<u-cell icon="car" title="导航至此" isLink @click="selectnav(item.Latlng)"></u-cell>
							<u-cell title="线路名称" :value="item.Name"></u-cell>
							<u-cell title="到机房的距离" :value="item.Length"></u-cell>
							<u-cell title="采集时间" :value="item.CreateTime"></u-cell>
							<u-cell title="敷设方式" :value="item.BuildType"></u-cell>
							<u-cell title="备注" :value="item.Remark"></u-cell>
							<u-cell title="现场照片"></u-cell>
							<view>
								<u-album :urls="item.urls" keyName="src2"></u-album>
							</view>
							<u-cell title="序号" :value="item.Idx"></u-cell>
							<u-cell title="坐标" :value="item.Latlng"></u-cell>
							<u-cell title="采集人" :value="item.Creator.Name"></u-cell>
							<u-cell title="运维类型" :value="item.Type"></u-cell>	
						</u-cell-group>
						<u-button v-if="userinfo.Roles && userinfo.Roles.indexOf('管理员角色')>-1" type='error'
							@click="showconfirm=true">删除该点
						</u-button>
						<u-modal :content="'确定要删除吗？'" :show="showconfirm" showCancelButton closeOnClickOverlay
							@confirm="del(item.Id)" @cancel="showconfirm=false" @close="showconfirm=false"></u-modal>
					</u-list>
					</u-scroll-list>
			</u-popup>
			<u-modal :show="showLegends" title="图例" :closeOnClickOverlay='true' @close="showLegends =!showLegends" @confirm="showLegends =!showLegends">
				<u-list height='300px'>
					<u-list-item>
						<u-cell title='巡检'>
							<u-avatar slot="icon" shape="square" size="35" :src="`https://project.gxrunxiang.com/cdn/icon.png`"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
						</u-cell>
					</u-list-item>
					<u-list-item>
						<u-cell title='抢修'>
							<u-avatar slot="icon" shape="square" size="35" :src="`https://project.gxrunxiang.com/cdn/pink.png`"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
						</u-cell>
					</u-list-item>
					<u-list-item>
						<u-cell title='整治'>
							<u-avatar slot="icon" shape="square" size="35" :src="`https://project.gxrunxiang.com/cdn/cyan.png`"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
						</u-cell>
					</u-list-item>
				</u-list>
			</u-modal>
			<u-action-sheet @close="showsheet=false" :actions="actionslist" title="导航选择" @select="nav"
				:show="showsheet"></u-action-sheet>
					<u-loading-page
					    :loadingText="loadingPageData.loadingText"
					    :image="loadingPageData.image"
						:iconSize="loadingPageData.iconSize"
					    :loadingMode="loadingPageData.loadingMode"
					    :bgColor="loadingPageData.bgColor"
					    :loading="loading"
					    :color="loadingPageData.color"
					    :loadingColor="loadingPageData.loadingColor"
											>
					</u-loading-page>
		</template>
	</view>
</template>

<!-- 逻辑层代码 -->
<script>
	import {
		getlinelist,
		getfilebyoutid,
		deleteline,
		searchline,
	} from '@/common/api.js'
	import {
		baseUrl
	} from '@/common/config.js'
	// import {
	// 	loadModules
	// } from 'esri-loader';
	export default {
		data() {
			return {
				showsheet: false,
				actionslist: [{
						name: '百度导航',
					},
					{
						name: '腾讯导航',
					},
					{
						name: '高德导航',
					}
				],
				loadingPageData: {
					// 自定义提示内容
					loadingText: '',
					// 自定义图片
					image: '',
					// 自定义加载动画模式
					loadingMode: '',
					// 自定义背景色
					bgColor: '#ffffff',
				},
				loading: false,
				islocated: false,
				seachlist: [],
				keyword: '',
				locateWord: '',
				outdata: [],
				isselect: false,
				isNow: false,
				outisimage: false,
				outcenter: [108.1, 23],
				ismapready: false,
				showpop: false,
				urls: [],
				userinfo: {},
				show: false,
				showconfirm: false,
				showLegends: false,
				showLocate: false,
				navtype: '',
				TagX: '',
				TagY: '',
				city: '',
				showLat: '',
				showLng: '',
				// item: {
				// 	Name: '',
				// 	BuildType: '',
				// 	Idx: '',
				// 	CreateTime: '',
				// 	Remark: '',
				// 	Creator: {
				// 		Name: ''
				// 	},
				// 	CreatorId: ''
				// },
				items: [],
			}
		},
		methods: {
			containerclick() {
				// if (!this.loading && this.ismapready)
				// 	this.loading = true
				// else
				// 	this.loading = false
			},
			selectnav(Latlng) {
				this.showsheet = true;
				this.showpop = false;
				this.TagX = Latlng.split(',')[1]
				this.TagY = Latlng.split(',')[0]
			},
			nav(e) {
				if (e.name == "百度导航")
					this.wakeBaidu()
				if (e.name == "高德导航")
					this.wakeGaoDe()
				if (e.name == "腾讯导航")
					this.wakeTengXun()

			},
			wakeTengXun() {
				var purl = " https://apis.map.qq.com/uri/v1/routeplan?type=drive&fromcoord=" + 0 + "," + 0 +
					"&to=目的地&tocoord=" + this.TagY + "," + this.TagX + "&policy=0&referer=外业举证app&coord_type=1"
				console.log(purl)
				plus.runtime.openURL(purl, function(e) {
					plus.nativeUI.alert("本机未安装指定的地图应用");
				});
			},
			wakeGaoDe() {
				var purl = "http://uri.amap.com/navigation?from=" + 0 + "," + 0 + ",我的位置&to=" + this.TagX + "," + this
					.TagY +
					",目的地&mode=car&policy=1&src=外业举证&coordinate=wgs84&callnative=1"
				plus.runtime.openURL(purl, function(e) {
					plus.nativeUI.alert("本机未安装指定的地图应用");
				});
			},
			wakeBaidu() {

				// urlObject 是我这边地址栏查询参数对象
				var queryStr = '?origin=name:我的位置|latlng:' + 0 + ',' + 0 + '&destination=' + this.TagY + ',' + this.TagX +
					'&region=目的地&coord_type=wgs84&mode=driving';


				var scheme = 'bdapp://map/direction' + queryStr;


				var purl = 'http://api.map.baidu.com/direction' + queryStr + '&output=html';
				console.log(purl)
				plus.runtime.openURL(purl, function(e) {
					plus.nativeUI.alert("本机未安装指定的地图应用");
				});

			},
			search() {
				searchline(this.keyword).then(res => {
					this.seachlist = res
				})
			},
			getdata() {
				let para = {
					Parameters: [],
					orderBys: ["Idx"]
				}
				// console.log("getdata")
				getlinelist('',para).then(res => {
					this.outdata = res.data;
					// console.log(this.outdata)
					// this.showdatas(this.datas)
					
				})
			},
			getNearData() {
				let now = new Date()
				let today = new Date();
				today.setDate(today.getDate() + 1);
				now.setMonth(now.getMonth() - 3)
				let para = {
					Parameters: [{
						FieldName: "CreateTime",
						ConditionalType: "GreaterThan",
						FieldValue: now
					},{
						FieldName: "CreateTime",
						ConditionalType: "LessThanOrEqual",
						FieldValue: today
					}],
					orderBys: ["Idx"]
				}
				// console.log("getdata")
				getlinelist('',para).then(res => {
					this.outdata = res.data;
					// console.log(this.outdata)
					// this.showdatas(this.datas)
					
				})
			},
			del(id) {
				// let p = [this.item.Id]
				let p = [id]
				deleteline(p).then(res => {
					if(this.isNow == true)
					this.getdata()
					else
					this.getNearData()
					this.showconfirm = false
					this.showpop = false
				})
			},
			mapready() {
				this.ismapready = true
			},
			goline(latlng) {
				var i = [parseFloat(latlng.split(',')[1]), parseFloat(latlng.split(',')[0])]
				this.outcenter = i
			},
			outlocation() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: (res) => {
						// console.log("定位结果" + res.longitude + "，" + res.latitude)
						// that.addrDel = res;
						this.outcenter = [res.longitude, res.latitude]
						this.islocated = true

					},
					fail: () => {
						// this.outcenter = [111.11111, 11.111111]
						// console.log("定位结果失败")
						// console.log(this)
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});
				// this.outcenter = [119,24]
			},
			outselect(i) {
				// let i = this.view.extent.center.latitude + "," + this.view.extent.center.longitude
				uni.navigateTo({
					url: `point?latlng=${i}`
				})
			},
			toggleSelect() {

				this.isselect = !this.isselect
			},
			toShow(){
				this.isNow = !this.isNow
				if(this.isNow == true){
					this.getdata()
				}
				else{
					this.getNearData()
				}
			},
			toLocate(e){
				 var i = [parseFloat(e.split(',')[0]), parseFloat(e.split(',')[1])]
				 this.outcenter = i
			},
			changeimage(e) {
				this.outisimage = e;
			},
			popon(e) {
				// console.log("e")
				// console.log(e)
				// this.urls = []
				this.loading = true
				var tempitem = []
				for (var i = 0; i < e.length; i++) {
					e[i].graphic.attributes.urls = []
					if (e[i].graphic.attributes.ImageList) {
						e[i].graphic.attributes.ImageList.forEach((element) => {
							e[i].graphic.attributes.urls.push(`${baseUrl}/SysFile/download?id=${element.Id}`)
						});
						tempitem.push(e[i].graphic.attributes)
					}
				}

				// this.item = e
				this.items = tempitem
				console.log(this.items);
				this.showpop = true;
				this.loading = false;
			},
			changeShow(e){
				this.showLat = e.split(",")[0]
				this.showLng = e.split(",")[1]
			},
			setloading() {
				this.loading = true
			},
			closeloading() {
				this.loading = false
			},
			close() {
				this.showpop = false;
			}




		},
		onLoad() {
			// this.getdata()
			this.userinfo = JSON.parse(uni.getStorageSync("$userinfo"))
		},
		onShow() {
					this.loadingPageData.loadingMode = 'spinner'
					this.loadingPageData.bgColor = 'rgba(0, 0, 0, 0.3)'
					this.loadingPageData.loadingText = "uView UI"
					this.loadingPageData.color = '#eee'
					this.loadingPageData.loadingColor = '#ddd'
			this.$ownerInstance.callMethod('mapready', {});
			if (this.ismapready){
				if(this.isNow)
				this.getdata()
				else
				this.getNearData()
			}
			
				// this.getdata()
			// console.log("执行o'nshow")
			// this.outlocation()
		}
	}
</script>

<!-- RenderJS视图层代码 -->
<script module="myMapView" lang="renderjs">
	import {
		loadModules
	} from 'esri-loader'
	import {
		baseUrl
	} from '@/common/config.js'
	export default {
		name: 'myMapView',
		data() {
			return {
				modules: [
					"esri/Map",
					"esri/views/MapView",
					"esri/Basemap",
					"esri/layers/Layer",
					"esri/layers/TileLayer",
					"esri/layers/WebTileLayer",
					"esri/layers/support/TileInfo",
					"esri/widgets/Locate",
					"esri/Graphic",
					"esri/PopupTemplate",
					"esri/widgets/ScaleBar",
				],
				view: "",
				gisConstructor: {},
				map: {},
				basemap2: {},
				basemap1: {},
				isimage: false,
				myMapObject: {}, // 对象，存储关于地图的图层、方法、属性等
				latlng: "",

			}
		},
		methods: {
			toggleimg(event, ownerInstance) {
				this.isimage = !this.isimage
				this.map.basemap = this.isimage ? this.basemap2 : this.basemap1
				ownerInstance.callMethod('changeimage', this.isimage)
			},


			ingetdata(that) {
				// console.log("ingetdata")
				if(this.isNow){
					that.$ownerInstance.callMethod('getdata', {
						val1: "参数1",
						val2: "参数2"
					});
				}
				else{
					that.$ownerInstance.callMethod('getNearData', {
						val1: "参数1",
						val2: "参数2"
					});
				}
				
			},
			inselect(event, ownerInstance) {
				console.log("inselect")
				let i = this.view.extent.center.latitude + "," + this.view.extent.center.longitude
				// uni.navigateTo({
				// 	url: `point?latlng=${i}`
				// })event, ownerInstance
				ownerInstance.callMethod('outselect', i)
			},



			inshowdatas(v) {
				// console.log('inshowdatas')
				if (this.myMapObject.showdatas)
					this.myMapObject.showdatas(v)
			},
			midChange(e){
				console.log(e,'zzz'); 
			},
			mgocenter(center) {
				// console.log("触发ingocenter")
				if (this.myMapObject.gocenter)
					this.myMapObject.gocenter(center)
			},

			createMapView() {

				const options = {
					url: 'https://js.arcgis.com/4.24/init.js',
					css: 'https://js.arcgis.com/4.24/esri/themes/light/main.css'
				};
				return new Promise((resolve, reject) => {
					loadModules(this.modules, options).then(([
						Map,
						MapView,
						Basemap,
						Layer,
						TileLayer,
						WebTileLayer,
						TileInfo,
						Locate,
						Graphic,
						PopupTemplate,
						ScaleBar,
					]) => {
						// console.log(args)
						// console.log(args)
						// for (let k in args) {
						// 	let name = this.modules[k].split('/').pop()
						// 	name = name.replace(name[0], name[0].toUpperCase())
						// 	this.gisConstructor[name] = args[k];
						// }
						var tileInfo = new TileInfo({
							dpi: 90.71428571427429,
							rows: 256,
							cols: 256,
							compressionQuality: 0,
							origin: {
								x: -180,
								y: 90
							},
							spatialReference: {
								wkid: 4490
							},
							lods: [{
								level: 0,
								levelValue: 1,
								resolution: 0.703125,
								scale: 295497593.05875003
							}, {
								level: 1,
								levelValue: 2,
								resolution: 0.3515625,
								scale: 147748796.52937502
							}, {
								level: 2,
								levelValue: 3,
								resolution: 0.17578125,
								scale: 73874398.264687508
							}, {
								level: 3,
								levelValue: 4,
								resolution: 0.087890625,
								scale: 36937199.132343754
							}, {
								level: 4,
								levelValue: 5,
								resolution: 0.0439453125,
								scale: 18468599.566171877
							}, {
								level: 5,
								levelValue: 6,
								resolution: 0.02197265625,
								scale: 9234299.7830859385
							}, {
								level: 6,
								levelValue: 7,
								resolution: 0.010986328125,
								scale: 4617149.8915429693
							}, {
								level: 7,
								levelValue: 8,
								resolution: 0.0054931640625,
								scale: 2308574.9457714846
							}, {
								level: 8,
								levelValue: 9,
								resolution: 0.00274658203125,
								scale: 1154287.4728857423
							}, {
								level: 9,
								levelValue: 10,
								resolution: 0.001373291015625,
								scale: 577143.73644287116
							}, {
								level: 10,
								levelValue: 11,
								resolution: 0.0006866455078125,
								scale: 288571.86822143558
							}, {
								level: 11,
								levelValue: 12,
								resolution: 0.00034332275390625,
								scale: 144285.93411071779
							}, {
								level: 12,
								levelValue: 13,
								resolution: 0.000171661376953125,
								scale: 72142.967055358895
							}, {
								level: 13,
								levelValue: 14,
								resolution: 8.58306884765625e-005,
								scale: 36071.483527679447
							}, {
								level: 14,
								levelValue: 15,
								resolution: 4.291534423828125e-005,
								scale: 18035.741763839724
							}, {
								level: 15,
								levelValue: 16,
								resolution: 2.1457672119140625e-005,
								scale: 9017.8708819198619
							}, {
								level: 16,
								levelValue: 17,
								resolution: 1.0728836059570313e-005,
								scale: 4508.9354409599309
							}, {
								level: 17,
								levelValue: 18,
								resolution: 5.3644180297851563e-006,
								scale: 2254.4677204799655
							}, {
								level: 18,
								levelValue: 19,
								resolution: 2.68220901489257815e-006,
								scale: 1127.23386023998275
							}, {
								level: 19,
								levelValue: 20,
								resolution: 1.341104507446289075e-006,
								scale: 563.616930119991375
							}]
						});
						let key = '03e5fbb70693a7fe79505f823f719616';
						let vec = new WebTileLayer({
							urlTemplate: "https://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
								key,
							subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
							copyright: "天地图影像",
							tileInfo: tileInfo,
							spatialReference: {
								wkid: 4490
							} //重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
						});

						var veczj = new WebTileLayer({
							urlTemplate: "https://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
								key,
							subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
							copyright: "天地图影像注记",
							tileInfo: tileInfo,
							spatialReference: {
								wkid: 4490
							} //重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
						});
						let img = new WebTileLayer({
							urlTemplate: "https://{subDomain}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
								key,
							subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
							copyright: "天地图影像",
							tileInfo: tileInfo,
							spatialReference: {
								wkid: 4490
							} //重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
						});

						var imgzj = new WebTileLayer({
							urlTemplate: "https://{subDomain}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
								key,
							subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
							copyright: "天地图影像注记",
							tileInfo: tileInfo,
							spatialReference: {
								wkid: 4490
							} //重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
						});
						this.basemap1 = new Basemap({
							baseLayers: [vec, veczj],
							title: "天地图矢量",
							id: "basemap1"
						});
						this.basemap2 = new Basemap({
							baseLayers: [img, imgzj],
							title: "天地图影像",
							id: "basemap2"
						});
						this.map = new Map({
							spatialReference: {
								wkid: 4490
							},
							basemap: this.basemap1, // 底图置空
							// layers: [satelliteLayer, anoBaseLayer], // 添加自定义的layer为底图

						});


						// 创建一个mapView并绑定页面元素
						var view = new MapView({
							spatialReference: {
								wkid: 4490
							},
							container: "myMapView",
							map: this.map,
							zoom: 15, // 缩放比例 值越大图越大
							center: [108.319884, 22.827034],

						});
						this.view = view
						this.view.on("drag", e => {
							let i = this.view.extent.center.latitude + "," + this.view.extent
								.center.longitude
							this.latlng = i;
							// this.showLat = this.view.extent.center.latitude
							// this.showLng = this.view.extent.center.longitude
							this.$ownerInstance.callMethod('changeShow', this.view.extent.center.latitude+','+this.view.extent.center.longitude)
							// this.ondrag(i)
							// console.log(this_.latlng)

						})
						let scaleBar = new ScaleBar({
							view: view,
							unit: "dual"
						});
						// Add widget to the bottom left corner of the view
						view.ui.add(scaleBar, {
							position: "bottom-left"
						});
						// view.goTo({
						// 	center: [108.11111, 22.22222],
						// 	zoom: 15
						// });


						const locateBtn = new Locate({
							view: this.view
						});

						// Add the locate widget to the top left corner of the view
						this.view.ui.add(locateBtn, {
							position: "bottom-right"
						});
						this.view.constraints = {

							minZoom: 6,

							maxZoom: 17,

						};
						// 给 “地图视图” 绑定点击事件
						this.view.on('click', e => {
							// hitTest 方法在点击位置上如果存在 Graphic（线或点），即可获取 Graphic 对象的整个数据
							// this.$ownerInstance.callMethod('setloading')
							this.$ownerInstance.callMethod('closeloading')
							this.view.hitTest(e)
								.then(res => {
									if (res.results.length > 0) {

										// 获取每个图形上的ID
										// this.$message.info(JSON.stringify(res.results[0].graphic.attributes))
										// this.$ownerInstance.callMethod('popon', res.results[0]
										// 	.graphic.attributes);
										// console.log(res)
										this.$ownerInstance.callMethod('popon', res.results)
										// 	.graphic.attributes);
									}






								})
						})

						// 地图加载完成事件


						// 定义myMapObject的方法供外部调用
						// this.myMapObject.methodForOutSide = function(val) {
						// 	console.log("methodForOutSide方法被调用了：" + val);
						// }
						this.myMapObject.showdatas = function(datas) {
							view.graphics.removeAll()



							var points = [];
							var lines = {};
							for (var i = 0; i < datas.length; i++) {


								points.push(this.createpoint(datas[i]))
								if (!lines[datas[i].Name])
									lines[datas[i].Name] = [];
								var lat = datas[i].Latlng.split(',')[0]
								var lng = datas[i].Latlng.split(',')[1]
								lat = parseFloat(lat)
								lng = parseFloat(lng)
								lines[datas[i].Name].push([lng, lat])
								
							}
							if (points.length > 0)
								console.log("view")
							console.log(view)
							view.graphics.addMany(points)

							// for (var i in lines) {
							// 	if (lines[i].length > 1)
							// 		view.graphics.add(this.createline(lines[i]))
							// }大东去掉

							// this.view.graphics.add(this.createline(lines[i]))

						}
						this.myMapObject.createline = function(linearr) {
							const polyline = {
								type: "polyline", // autocasts as new Polyline()
								paths: linearr

							};

							// Create a symbol for drawing the line
							const lineSymbol = {
								type: "simple-line", // autocasts as SimpleLineSymbol()
								color: [226, 119, 40],
								width: 4
							};


							const polylineGraphic = new Graphic({
								geometry: polyline,
								symbol: lineSymbol,

							});
							return polylineGraphic;
						}
						this.myMapObject.gocenter = function(center) {
							console.log("ob内部的gocenter")
							view.goTo({
								center: center,
								zoom: 16
							});
						}
						this.myMapObject.createpoint = function(item) {
								var lat = item.Latlng.split(',')[0]
								var lng = item.Latlng.split(',')[1]
								lat = parseFloat(lat)
								lng = parseFloat(lng)
								const point = {
									type: "point", // autocasts as new Point()
									longitude: lng,
									latitude: lat
								};

								var content = "线路名称:" + item.Name + "</br>铺设类型:" + item.BuildType +
									"</br>序号：" + item.Idx +
									"</br>备注：" + item.Remark + "</br>"
								if (item.ImageList)
									for (var i = 0; i < item.ImageList.length; i++) {
										content +=
											`<img style='width:50px;heigth:50px' src='${baseUrl}/SysFile/download?id=${item.ImageList[i].Id}'/>`
									}
								// content+="<br><a href=''"	
								// console.log("createpoint")
								// console.log(args)
								// console.log(this.gisConstructor)
								// console.log(this.createpoint)
								var popupTemplate = new PopupTemplate({
									// "title": item.Name,
									"content": content
								})
								let color = []
								if(!item.Type || item.Type == '巡检'){
									color = [226, 119, 40]
								}else if(item.Type == '抢修'){
									color = [255, 105, 180]
								}else if(item.Type == '整治'){
									color = [0, 255, 255]
								}
								// Create a symbol for drawing the point
								const markerSymbol = {
									type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
									// color: [226, 119, 40],
									color: color,
									outline: {
										// autocasts as new SimpleLineSymbol()
										color: [255, 255, 255],
										width: 2
									}
								};

								// Create a graphic and add the geometry and symbol to it
								const pointGraphic = new Graphic({
									geometry: point,
									symbol: markerSymbol,
									// popupTemplate: popupTemplate,
								});
								
								pointGraphic.attributes = item
								return pointGraphic
							},
							this.myMapObject.map = this.map;
						// 地图加载完成事件
						this.view.when(function() {
							resolve();
							console.log("地图加载完成了！");

						});
						// this.outlocation()
					})
				})

			},

		},
		mounted() {

			// this.createMapView()
			// 页面初始化完成后
			var this_ = this;
			this.createMapView().then(() => {
				console.log("加载地图的promise执行结束了....")
				// 打印地图对象
				console.log(this.myMapObject.map);
				// this_.myMapObject.view.on("drag", e=> {
				// 			let i = view.extent.center.latitude + "," + view.extent.center
				// 				.longitude
				// 			this.latlng=i;
				// 			// this.ondrag(i)
				// 			// console.log(this_.latlng)

				// 		})
				// 调用createMapView()内部的方法
				// this.myMapObject.methodForOutSide();
				// console.log(this.myMapObject.gocenter);
				this.ingetdata(this);
				this.$ownerInstance.callMethod('outlocation', {});
				this.$ownerInstance.callMethod('mapready', {});
			});

		},
	}
</script>

<style>
	/deep/.esri-widget--button {
		display: none;
	}

	/deep/.esri-attribution__powered-by {
		display: none;
	}

	/deep/.esri-view .esri-view-surface--inset-outline:focus::after {
		outline: none;
	}

	.center {
		/* background: green; */
		position: absolute;
		width: 50px;
		height: 100px;
		left: 50%;
		top: 50%;
		margin-left: -25px;
		margin-top: -100px;
		z-index: 999;
	}

	.center1 {
		/* background: green; */
		position: absolute;
		width: 50px;
		height: 50px;
		left: 50%;
		top: 50%;
		margin-left: -25px;
		margin-top: -50px;
		z-index: 999;
	}
</style>
